<template>
  <!-- 报名人数 -->
  <div id="main">
    <div class="flex items-center mb-4 h-12">
      <choosect ref="chooseCT" />
      <el-button icon="el-icon-upload2" class="ml-4" type="primary" plain
        @click="refresh"
      >
        提交
      </el-button>
      <el-button icon="el-icon-delete" class="ml-4" type="warning" plain
        @click="refresh"
      >
        清空
      </el-button>
    </div>
    <div class="content" v-if="chooseCT">
      <div class="text-center mb-5 font-bold text-2xl">报名信息可视化(加载测试[10846]、加载测试[16485]、'加载测试[21485])</div>
      <template v-if="chartData && chartData.length">
        <div class="flex mb-5">
          <chart-line
            title="折线图 - 报名人数x时间" 
            id="sut1"
            style="height: 30vw;width: 70vw;"
            subtext=""
            :xAxisDate="new Array(33).fill(undefined).map((e,i)=>`第${i+1}天`)"
            :legend="true"
            :chartdata="[{
                name: '加载测试[10846]',
                data: [0,12,20,25,35,54,76,78,130,120,121,120,120,122]
              }, {
                name: '加载测试[16485]',
                data: [0,25,59, 78, 100, 102, 108, 108, 107]
              }, {
                name: '加载测试[21485]',
                data: [0,15,89, 78, 80, 90, 87, 95, 94,94,94,96,98,94,92,90,95,95,96,96,96,99,96,96,96,96,96,96,96,96,96,96,96]
              }]"
          />
          <el-card style="width: calc(100% - 70vw - 5px);">
            比赛进行期间,报名人数的走势
          </el-card>
        </div>
        <div class="flex mb-5">
          <el-card style="width: calc(100% - 70vw - 5px);">
            添加一些描述
          </el-card>
          <chart-line
            title="折线图 - 平均增长率x时间" 
            id="sut2"
            style="height: 30vw;width: 70vw;"
            subtext=""
            :xAxisDate="new Array(33).fill(undefined).map((e,i)=>`第${i+1}天`)"
            :chartdata="[{
                name: '平均增长率',
                data: [1.5,1.2,1.1,1.2,0.8,0.6,0.5,0.5,0.3,0.2,0.4,0,0,0,0,0,0,0,-0.1,0,0,0,0,0,0,-0.1,0.1,0.1,-0.1,0,0,0,-0.1]
              }]"
          />
        </div>
        <div class="flex mb-5">
          <chart-bar
            title="柱状图 - 平均报名人数x时间" 
            id="sut3"
            style="height: 30vw;width: 70vw;"
            :chartdata="new Array(24).fill(undefined).map(e=>10+Math.ceil(Math.random()*20))"
            :xAxisDate="new Array(24).fill(undefined).map((e,i)=>`${i}h`)"
          />
          <el-card style="width: calc(100% - 70vw - 5px);">
            平均增长率
          </el-card>
        </div>
      </template>
      
    </div>
    <div class="content flex text-4xl" v-else>
      <span class="m-auto">
        NULL - 请选择赛事并提交...
      </span>
    </div>
  </div>
</template>

<script>
  import choosect from './modules/chooseCT.vue'
  import chartLine from '../modules/line'
  import chartBar from './modules/bar'
  export default {
    name: 'SignUpTrend',
    components: {
      choosect,
      chartLine,
      chartBar
    },
    data() {
      return {
        chooseCT: false,//*false,
        chartData: [1]
      }
    },
    watch: {},
    created() {},
    mounted() {
      window.addEventListener('resize', this.resizeChart)
    },
    methods: {
      resizeChart() {
        console.log("resize")
      },
      refresh() {
        const chooseCT = this.$refs.chooseCT.getVS()
        console.log({
          chooseCT
        })
        this.chooseCT = chooseCT
      }
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    }
  }
</script>
<style lang="scss" scoped>
  #main {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;

    .content {
      height: calc(100% - 1rem - 3rem);
      overflow-y: scroll;
    }
  }
</style>
